import  {  useEffect } from "react";
import { useSnapshot } from "valtio";
import { Finance1 } from "@/stores/Finance1";
import {Card} from "antd";
import type { TableColumnsType } from "antd";
import WHeaders from "@/components/WHeaders";
import WTables from "@/components/WTables";
import Chart from "@/components/Chart";

export default function Salesrevenuedetails() {
  const finance=useSnapshot(Finance1); //获取数据
  interface DataType {
    key?: string;
    brand?: string;// 品牌
    partition?: string;// 区域
    shop?: string;// 店铺
    platform: string;// 订单来源
    order: number;// 订单总量
    unSettled: number; // 未结算订单
    settled: number;// 已结算订单
    returnOrder: number;// 退订订单
    total: number; // 总营业额
    settledAmount: number;// 已结算金额
    paidAmount: number;//实付金额
    delivery: number;// 配送费
    platforms: number;//平台补贴
    service: number; // 服务费
    children?: DataType[]; // 子集
    date: string; // 日期
  }
  const columns: TableColumnsType<DataType> = [
    {
      title: "店铺",
      dataIndex: "shop",
      key: "shop",
    },
    {
      title: "订单来源",
      dataIndex: "platform",
      key: "platform",
    },
    {
      title: "订单总量",
      dataIndex: "order",
      key: "order",
    },{
      title: "未结算订单",
      dataIndex: "unSettled",
      key: "unSettled",
    },
    {
      title: "已结算订单",
      dataIndex: "settled",
      key: "settled",
    },
    {
      title: "退订订单",
      dataIndex: "returnOrder",
      key: "returnOrder",
    },
    {
      title: "总营业额",
      dataIndex: "total",
      key: "total",
    },
    {
      title: "已结算金额",
      dataIndex: "settledAmount",
      key: "settledAmount",
    },
    {
      title: "实付金额",
      dataIndex: "paidAmount",
      key: "paidAmount",
    },
    {
      title: "配送费",
      dataIndex: "delivery",
      key: "delivery",
    },
    {
      title: "平台补贴",
      dataIndex: "platforms",
      key: "platforms",
    },
    {
      title: "服务费",
      dataIndex: "service",
      key: "service",
    }
  ];
  useEffect(() => {
      // socket.connectWebSocket();
      finance.getList()
    }, []);
  return (
    <div className="w-[100%]">
      <WHeaders finance={Finance1}/>
      <div className="w-[93%] flex justify-between items-center m-auto">
        <Card title="门店销售报表" className="w-[49%] m-auto mt-10">
            <Chart width={"100%"} height={"300px"} options={finance.FinanceTrend} name="门店销售报表"></Chart>
        </Card>
        <Card title="门店销售报表" className="w-[49%] m-auto mt-10">
            <Chart width={"100%"} height={"300px"} options={finance.FinanceTrend} name="门店销售报表"></Chart>
        </Card>
      </div>
      <WTables columns={columns} data={finance.data} title={"门店销售报表"}></WTables> 
    </div>
    )
}
